<template>
  <div class="grades-layout" :style="{ '--aside-width': asideWidth + 'px' }">
    <header class="topbar">
      <div class="brand">
        <div class="logo">G</div>
        <span class="system-name">成绩管理系统</span>
      </div>
      <div class="topbar-actions">
        <el-tooltip content="折叠菜单" placement="bottom">
          <el-button class="collapse-btn" link @click="toggleAside">
            <el-icon>
              <Fold v-if="!isCollapsed" />
              <Expand v-else />
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-dropdown @command="onCommand">
          <span class="avatar-trigger">
            <el-avatar :size="30" src="https://unavatar.io/github/vercel"></el-avatar>
            <el-icon class="dropdown-icon">
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <aside class="sidebar" :style="{ width: asideWidth + 'px' }">
      <el-menu class="menu" :collapse="isCollapsed" :default-active="activeMenu" @select="onSelect">
        <el-menu-item index="students">
          <el-icon>
            <UserFilled />
          </el-icon>
          <span>学生管理</span>
        </el-menu-item>
        <el-menu-item index="teachers">
          <el-icon>
            <UserFilled />
          </el-icon>
          <span>教师管理</span>
        </el-menu-item>
        <el-menu-item index="departments">
          <el-icon>
            <OfficeBuilding />
          </el-icon>
          <span>院系管理</span>
        </el-menu-item>
        <el-menu-item index="majors">
          <el-icon>
            <School />
          </el-icon>
          <span>专业管理</span>
        </el-menu-item>
        <el-menu-item index="classes">
          <el-icon>
            <Collection />
          </el-icon>
          <span>班级管理</span>
        </el-menu-item>
        <el-menu-item index="courses">
          <el-icon>
            <Notebook />
          </el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="terms">
          <el-icon>
            <Calendar />
          </el-icon>
          <span>学期管理</span>
        </el-menu-item>
        <el-menu-item index="offerings">
          <el-icon>
            <Collection />
          </el-icon>
          <span>开课管理</span>
        </el-menu-item>
        <el-menu-item index="score-items">
          <el-icon>
            <List />
          </el-icon>
          <span>成绩项</span>
        </el-menu-item>
        <el-menu-item index="enrollments">
          <el-icon>
            <Tickets />
          </el-icon>
          <span>选课管理</span>
        </el-menu-item>
        <el-menu-item index="appeals">
          <el-icon>
            <ChatLineRound />
          </el-icon>
          <span>成绩申诉</span>
        </el-menu-item>
        <el-menu-item index="publish">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>成绩发布</span>
        </el-menu-item>
      </el-menu>
    </aside>

    <main class="main" :style="{ marginLeft: asideWidth + 'px' }">
      <div class="content">
        <el-card class="content-card" shadow="never">
          <router-view />
        </el-card>
      </div>
    </main>
  </div>
}</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  UserFilled, Notebook, Calendar, OfficeBuilding,
  Collection, List, Tickets, ChatLineRound, School,
  Promotion, Fold, Expand, ArrowDown
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const isCollapsed = ref(false)
const asideWidth = computed(() => (isCollapsed.value ? 64 : 200))
const activeMenu = computed(() => route.name?.toString().replace('grades-', '') || 'students')

function toggleAside() {
  isCollapsed.value = !isCollapsed.value
}

function onSelect(key: string) {
  const mapping: Record<string, string> = {
    teachers: 'grades-teachers',
    departments: 'grades-departments',
    majors: 'grades-majors',
    classes: 'grades-classes',
    courses: 'grades-courses',
    terms: 'grades-terms',
    offerings: 'grades-offerings',
    'score-items': 'grades-score-items',
    enrollments: 'grades-enrollments',
    appeals: 'grades-appeals',
    publish: 'grades-publish',
  }
  const name = mapping[key] || 'grades-students'
  router.push({ name })
}

function onCommand(cmd: string) {
  if (cmd === 'profile') ElMessage.info('打开个人中心')
  if (cmd === 'logout') ElMessage.success('已退出登录')
}
</script>

<style scoped>
:root {
  --brand-blue: #3b82f6;
  --brand-white: #ffffff;
  --text-main: #0f172a;
  --text-sub: #64748b;
}

.grades-layout {
  font-family: Inter, "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: #f8fafc;
  min-height: 100vh;
  color: var(--text-main);
}

/* 顶部导航栏 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-white);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 16px;
  z-index: 1000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.system-name {
  font-size: 16px;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.collapse-btn {
  margin-right: 8px;
}

/* 左侧菜单栏 */
.sidebar {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  background: var(--brand-white);
  border-right: 1px solid #e2e8f0;
  transition: width 0.2s ease;
}

.menu {
  height: 100%;
  border-right: none;
}

/* 主体内容区 */
.main {
  margin-top: 64px;
  padding: 16px;
  margin-left: var(--aside-width);
  transition: margin-left 0.2s ease;
}

.content {
  width: min(1400px, calc(100vw - var(--aside-width) - 32px));
  margin: 0 auto;
}

.content-card {
  border-radius: 12px;
  width: 100%;
}

/* 响应式 */
@media (max-width: 768px) {
  .system-name {
    display: none;
  }
}
</style>